<template>
    <div class="w1008 m0auto">
        <!-- 搜索框： -->
        <div class="flex-dire-row ss_kuang">
            <img src="/static/image/sousuo.png" id="search_img" style="width: 0.555556rem;height: 0.555556rem;" class="ml20">
            <input ref="searchInput" type="text" id="get_searchWords" v-model="inputVal" class="fs42" placeholder-class="fs42" placeholder-style="color:#999999;" style="width:8.148148rem;margin-left: 0.092593rem;color:#999999;" placeholder="搜索家族名称">
        </div>
        <div id="show_members" style="width: 100%;">
            <router-link :to="{ name: 'jiazuRoomId', params: { roomId: item.family_id }}" v-for="(item,index) in jiazuList" :key="index" class="flex-dire-row jiazu_one">
                <span style="margin-left: 0.277778rem;display: inline-block;width: 0.648148rem;">{{index + 1}}</span>
                <div style="margin-left: 0.277778rem;" class="jiazu_logo">
                    <img style="width:100%;height: 100%;" class="test-lazyload" :src="item.family_image">
                </div>
                <div style="margin-left: 0.37037rem;width: 4.801481rem;">
                    <p class="line_one">{{item.family_name}}</p>
                </div>
                <span style="margin-left: 0.15rem;color:#999;" v-show="item.state || 0==1?true:false">已加入</span>
            </router-link>
        </div>
       <div id="nodata" v-if="jiazuList.length===0">
                <span style="font-size: 0.37037rem;margin-left: 0.277778rem;">亲，搜索不到数据！</span>
        </div>
    </div>
</template>

<script>
import getRequests from '../assets/js/common'; 
import { Toast } from 'mint-ui';
import axios from 'axios';
export default {
  data () {
    return {
      name:'jiazuList',
      jiazuList:[],
      inputVal: '',
    }
  },
  mounted () {
    var that = this;
			that.https.post(getRequests.getRequests.searchFamily,{
      }).then(res => {
          console.log(res);
          this.jiazuList = res.data;
	})
  },
  watch:{
    inputVal(curVal, oldVal){   
        // {keyword:curVal}        
        var that = this;
			that.https.post(getRequests.getRequests.searchFamily,{keyword:curVal}).then(res => {                
            this.jiazuList = res.data;
            if(this.jiazuList.length === 0){
                Toast('亲，暂时没有搜索到数据！');
            }
        })
    }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
   body {
            background-color: #f5f5f5 !important;
        }
        
        .ss_kuang {
            width: 100%;
            height: 0.833333rem;
            background-color: #fff;
            align-items: center;
            border-radius: 0.416667rem;
            margin: 0.324074rem auto;
        }
        
        .ml20 {
            margin-left: 0.185185rem;
        }
        
        .jiazu_one {
            width: 100%;
            height: 1.388889rem;
            align-items: center;
            font-size: 0.444444rem;
            color: #333;
            border-radius: 0.138889rem;
            background-color: #fff;
            margin-bottom: 0.37037rem;
        }
        
        .jiazu_one .jiazu_logo {
            width: 1.111111rem;
            height: 1.111111rem;
            border-radius: 100%;
            overflow: hidden;
        }
        
        #nodata {
            text-align: center;
        }
</style>
